<template>
	<view class="">
		<view class="popup-content">
			<!-- 校区搜索和排序 -->
			<u-gap height="20rpx" bgColor="#f0f0f0"></u-gap>
			
			<view class="popup-body">
				<view class="activity-card">
					<view class="activity-header">
						<text class="activity-name">{{ activity.name }}</text>
						<view class="tag flex-align">
							{{ activity.course_name }}
						</view>
					</view>
					
					<view class="activity-content">
						<view class="image">
							<!-- <u--image width="100%" height="250rpx" :src="item.cover != null ? item.cover : pic_img" radius="5"></u--image> -->
							<view
								style="width: 100%;height: 250rpx;background-color: #EDF5F5;display: flex;lex-direction: row; justify-content: center; align-items: center;">
								<image style="width: 100%;height: 250rpx;" :src="activity.cover" mode="aspectFit">
								</image>
							</view>
						</view>
						<view class="activity-info">
							<view class="" style="display: flex; flex-direction: row; align-items: center;">
								<!-- <view class="tag flex-align">
									{{ activity.course_name }}
								</view> -->
								<view class="tag flex-align" v-if="atstus == 1">
									{{ activity.train_program_name }}
								</view>
								<view class="tag flex-align" v-if="atstus == 2">
									{{ activity.program_name }}
								</view>
								<view class="tag flex-align" v-if="atstus == 3">
									{{ activity.train_enum_name }}
								</view>
							</view>
							<view
								style="font-size: 24rpx;color: #4E6EAF;display: flex; flex-direction: row; align-items: center; ">
								<view class="" style="margin-right: 10rpx;">
									{{activity.area_name}}
								</view>
								<view class="tags flex-align">
									{{ activity.train_enum_name }}
								</view>
								
							</view>
							<text class="date-range">{{ activity.display_start }}{{ activity.display_end }}</text>
							<view class="activity-progress"  v-if="atstus == 1">
								<text
									class="progress-text">已报名：{{ activity.enroll_cnt }}/{{ activity.total_stock }}，剩余：{{ activity.less_stock }}</text>
								<view class="" style="height: 30rpx;width: 100%;margin-top: 10rpx;">
									<u-line-progress :percentage="activity.percent" activeColor="#00aa7f"
										:showText="true"></u-line-progress>
								</view>
							</view>
							<view class="activity-progress"  v-if="atstus == 2">
								<text
									class="progress-text">已报名：{{ activity.stock_sales }}/{{ activity.stock_sales + activity.less_stock }}，剩余：{{ activity.stock_sales }}</text>
								<view class="" style="height: 30rpx;width: 100%;margin-top: 10rpx;">
									<u-line-progress :percentage="activity.enroll_progress" activeColor="#00aa7f"
										:showText="true"></u-line-progress>
								</view>
							</view>
							<view class="activity-progress"  v-if="atstus == 3">
								<text
									class="progress-text">已报名：{{ activity.stock_sales }}/{{ activity.total_stock }}，剩余：{{ activity.less_stock }}</text>
								<view class="" style="height: 30rpx;width: 100%;margin-top: 10rpx;">
									<u-line-progress :percentage="activity.enroll_progress" activeColor="#00aa7f"
										:showText="true"></u-line-progress>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="card-list" style="margin-top: 360rpx;">
					<view v-for="(item, index) in hylist" :key="index" class="card">
						<!-- 学员基本信息 -->
						<view class="student-info">
							<view class="avatar-wrapper" @click="goToDetail(item)">
								<text class="gender-icon"
									:style="{ '--gender-color': item.xb === '男' ? '#007AFF' : '#FF4D4F' }">{{ item.xb === '男' ? '♂' : '♀' }}</text>
								<image class="avatar" :src="item.head_img" mode="aspectFill" />
							</view>
							<view class="info-right" @click="goToDetail(item)">
								<view class="student-base">
									<view class="base-row">
										<view class="base-group">
											<view class="base-info">
												<text class="name">{{item.student_name}}</text>
												<text class="birthday-tag">{{ item.age }}岁</text>
											</view>
											<view class="phone-row">
												<text class="phone">{{ item.mobile }}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="badge-wrap">
								<text class="package-count" style="color: #007AFF"
									@click="showCoursePackages(item)"><text>{{item.package_num}}</text>课包</text>
							</view>
						</view>
						<!-- 课程信息 -->
						<view class="course-info">
							<view class="course-info-grid">
								<!-- <view class="grid-item course-type">
								</view> -->
								<view class="grid-item course-id">
									<text class="value course-id-text">计次｜{{ item.train_no }}｜{{ item.name }}</text>
									<uni-icons type="copy" :size="16" color="#007AFF" @click="copyContent()" />
								</view>
								<view class="grid-item info-combined" @click="tomember(item, index)">
									<view class="grid-content">
										<view class="coach-info">
											<image class="coach-avatar" :src="item.coach_avatar" mode="aspectFill" />
											<view class="value class-name-wrap">
												<text
													class="class-info">{{ item.coach_name?item.coach_name:'' }}｜{{ item.area_name || '' }}｜{{ item.class_name?item.class_name :'' }}</text>
												<uni-icons class="class-arrow" type="right" :size="16" color="#007AFF"
													@click="showLessonRecord(item)" />
											</view>
										</view>
										<view class="lesson-info">
											<view class="status-info">
												<text class="merged-status-tag">新报｜{{item.status_show}}</text>
												<text class="info-divider">｜</text>
												<text class="highlight-expired">2024-10-20</text>
											</view>
											<text class="info-divider">｜</text>
											<view class="lesson-valid">
												<text class="value">{{item.left_num}}次</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
				
						<view class="enroll-info" @click="showEnrollDetail(item)">
							<scroll-view class="enroll-detail-scroll" scroll-x>
								<view class="enroll-detail-wrap">
									<text
										class="enroll-detail">报名来源：{{ item.founder || '-' }}｜{{item.purchase_route_name || '-'}} | {{ item.create_at  || '-'}}</text>
									<uni-icons class="view-more" type="eye" :size="14" color="#999999" />
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="" style="width: 100%;height: 120rpx;">
				
					</view>
				</view>
			</view>
		</view>
		<u-popup @touchmove.stop :show="enrollDetailPopup" @close="closehomeInfo" closeOnClickOverlay mode="center"
			:safeAreaInsetBottom="false" round="15">
			<scroll-view class="storepopup" style="height: 66vh;padding: 20rpx 20rpx;width: 600rpx;" scroll-y>
				<!-- <view class="title flex-between">
					<text>报名信息</text>
					<u-icon @click="closehomeInfo" name="close-circle-fill" color="#dde3e8" size="18"></u-icon>
				</view> -->
				<view class="enroll-detail-popup">
					<view class="enroll-detail-title">报名信息</view>
					<view class="enroll-detail-content">
						<view class="detail-item">
							<text class="detail-label">招生计划：</text>
							<text class="detail-value">{{ currentEnrollDetail.train_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">课程：</text>
							<text class="detail-value">{{ currentEnrollDetail.name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">课包：</text>
							<text class="detail-value">{{ currentEnrollDetail.buy_sku || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">校区：</text>
							<text class="detail-value">{{ currentEnrollDetail.area_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">项目：</text>
							<text class="detail-value">{{ currentEnrollDetail.cate_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">教练：</text>
							<text class="detail-value">{{ currentEnrollDetail.coach_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">课程规格：</text>
							<text class="detail-value">{{ currentEnrollDetail.train_item_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">招生老师：</text>
							<text class="detail-value">{{ currentEnrollDetail.founder || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">报名来源：</text>
							<text class="detail-value">{{ currentEnrollDetail.purchase_route_name || '-'  }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">报名时间：</text>
							<text class="detail-value">{{ currentEnrollDetail.create_at || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">订单人：</text>
							<text class="detail-value">{{ currentEnrollDetail.owner_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">学员：</text>
							<text class="detail-value">{{ currentEnrollDetail.student_name|| '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">联系电话：</text>
							<text class="detail-value">{{ currentEnrollDetail.custodian_mobile || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">报名费：</text>
							<text class="detail-value">{{ currentEnrollDetail.order_money || '-' }}元 </text>
							<text class="detail-value" style="color: #ff4040;">优惠({{ currentEnrollDetail.preferential_money || '-' }}元) </text>
						</view>
						<view class="detail-item">
							<text class="detail-label">班级：</text>
							<text class="detail-value">{{ currentEnrollDetail.class_name|| '-' }}</text>
						</view>
						<view class="detail-item remark-item">
							<text class="detail-label">备注：</text>
							<text class="detail-value">{{ currentEnrollDetail.remark || '-' }}</text>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="enroll-detail-footer">
				<button class="close-btn" @click="closehomeInfo">关闭</button>
			</view>
		</u-popup>
	</view>
</template>
<script>
	const personal = require("@/api/personal/index.js");
	const venues = require("@/api/venues/venues.js");
	import navbar from '@/mixins/navbar.js';
	export default {
		mixins: [navbar({
			navBarColor: '#fff'
		})],
		data() {
			return {
				campusActivities: [{
						id: 1,
						name: '暑期游学营',
						status: '进行中',
						enrolled: 45,
						total: 50,
						dateRange: '2024-07-01 至 2024-08-31',
						image: 'https://ai-public.mastergo.com/ai/img_res/e4b925607553738270771589257b38c7.jpg'
					},
					{
						id: 2,
						name: '全科辅导班',
						status: '进行中',
						enrolled: 28,
						total: 40,
						dateRange: '2024-06-01 至 2024-12-31',
						image: 'https://ai-public.mastergo.com/ai/img_res/3ed63e3a5031c62a50c920953a65307f.jpg'
					},
					{
						id: 3,
						name: '英语特训营',
						status: '即将开始',
						enrolled: 15,
						total: 30,
						dateRange: '2024-06-15 至 2024-09-15',
						image: 'https://ai-public.mastergo.com/ai/img_res/3a9608609815dc97575f199e3af88d31.jpg'
					},

				],
				id: '',
				venue_id: '',
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
				ordersList: [],
				searchKey2: '', // 搜索关键词
				originalList2: [],
				filteredList2: [], // 过滤后的列表，用于展示
				selectedItem2: null, // 选中项的数据
				onif2: false,
				sortOrder: "asc",
				searchKey3: '',
				sort: 1,
				activity:{},
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
				hylist: [],
				enrollDetailPopup:false,
				currentEnrollDetail:{},
				atstus:''
			}
		},
		onLoad(options) {
			const selectionArrs = JSON.parse(decodeURIComponent(options.selectionArr))
			console.log(selectionArrs,'selectionArrs')
			this.activity = selectionArrs
			this.venue_id = options.venue_id
			this.atstus = options.atstus
			this.id = options.id
			uni.setNavigationBarTitle({
				title: selectionArrs.name
			});
			this.pk_list()
		},
		methods: {
			tomember(item, index) {
				uni.navigateTo({
					url: '../../page_system/coursepackagelistdetail/index?id=' + item.id
				})
			},
			goToDetail(item) {
				uni.navigateTo({
					url: "../../page_system/coursepackagelist/detail?student_id=" + item.student_id
				});
			},
			closehomeInfo() {
				this.enrollDetailPopup = false
			},
			showEnrollDetail(item) {
				this.enrollDetailPopup = true
				this.currentEnrollDetail = item
			},
			async pk_list() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.hylist = [];
				let params = {
					venue_id: this.venue_id,
					keyword: this.keyword,
					pageSize: this.listQuery.pageSize,
					page: this.listQuery.pageNo,
					train_id:this.activity.id
				}
				let res = await venues.pk_list(params)
				if (res.code === 1) {
					that.hylist = that.hylist.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1
				this.pk_list()
			},
			async area_info() {
				let that = this;
				// if (this.listQuery.pageNo === 1) that.ordersList = [];
				let params = {
					venue_id: this.venue_id,
					area_id: this.id,
					keyword: this.searchKey3,
					sort: this.sort,
					// page: this.listQuery.pageNo,
					// pageSize: this.listQuery.pageSize,
				};
				let res = await personal.area_info(params);
				if (res.code == 1) {
					that.ordersList = res.data.list
					// that.ordersList = that.ordersList.concat(res.data.list.data); //将数据拼接在一起
					// that.totalPage = res.data.list.last_page
				}
			},
			// 下拉刷新
			// onReachBottom() {
			// 	// uni.showLoading({
			// 	// 	title: '加载中'
			// 	// });
			// 	if (this.totalPage <= this.listQuery.pageNo) {
			// 		// uni.hideLoading();
			// 		uni.showToast({
			// 			title: '没有更多了',
			// 			duration: 2000,
			// 			icon: 'none'
			// 		});
			// 		return
			// 	}
			// 	this.listQuery.pageNo += 1;
			// 	this.area_info()
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.box_20 {
		background-color: rgba(62, 62, 62, 1.0);
		border-radius: 10rpx;
		position: absolute;
		width: 280rpx;
		height: 140rpx;
		flex-direction: column;
		display: flex;
		right: 22px;
		top: 80rpx;
		z-index: 998;
		justify-content: center;
		align-items: center;

		.image-text_4 {
			width: 34rpx;
			height: 62rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 20rpx 0 0 28rpx;
		}

		.icon_5 {
			width: 30rpx;
			height: 30rpx;
			margin-left: 2rpx;
		}

		.text-group_4 {
			width: 34rpx;
			height: 18rpx;
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 18rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
			margin-top: 14rpx;
		}

		.image-text_5 {
			width: 36rpx;
			height: 65rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin: 17rpx 0 0 37rpx;
		}

		.icon_67 {
			width: 32rpx;
			height: 32rpx;
			margin-left: 2rpx;
		}

		.text-group_5 {
			width: 36rpx;
			height: 18rpx;
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 18rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 24rpx;
			margin-top: 15rpx;
		}

		.image-text_6 {
			width: 110rpx;
			height: 40rpx;
			background-color: rgba(255, 255, 255, 0.4);
			border-radius: 5rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			justify-content: space-around;
		}

		.icon_7 {
			width: 32rpx;
			height: 32rpx;
			margin-left: 2rpx;
		}

		.text-group_6 {
			overflow-wrap: break-word;
			color: rgba(255, 255, 255, 1);
			font-size: 18rpx;
			font-weight: 500;
			white-space: nowrap;
		}

		.image_4 {
			position: absolute;
			right: 10rpx;
			top: -13rpx;
			width: 28rpx;
			height: 14rpx;
		}
	}

	.search-sort {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin: 30rpx 0;
		position: relative;
		padding: 0 30rpx;

		.list-container2 {
			max-height: 300rpx;
			overflow-y: auto;
			box-shadow: 0 0 18rpx 8rpx hsla(0, 0%, 40%, .1);
			border-radius: 4rpx;
			padding: 10rpx;
			background-color: #fff;
			position: fixed;
			z-index: 999;
			top: 780rpx;
			left: 40rpx;
			width: 300rpx;
			font-size: 28rpx;

		}

		.list {
			height: 100%;
		}

		.list-item {
			padding: 15rpx;
			// border-bottom: 1px solid #eee;
			cursor: pointer;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 30rpx;
		}

		.card_jec {
			color: rgb(13, 132, 255);
		}

		.card_je {
			color: #000000;
		}

		.list-item:last-child {
			border-bottom: none;
		}

		.list-item:hover {
			background-color: #f5f5f5;
		}
	}

	.container {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.header {
		background-color: #f0f0f0;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		height: 88rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.date {
		font-size: 26rpx;
		color: #666;
	}

	.main {
		margin-top: 88rpx;
		padding: 30rpx;
	}

	.overview {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.total-card {
		background: #ffffff;
		padding: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.05);
	}

	.overview-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}

	.overview-item {
		background: #ffffff;
		padding: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.05);
	}

	.label {
		font-size: 26rpx;
		color: #666;
	}

	.value-container {
		display: flex;
		align-items: center;
		margin-top: 16rpx;
	}

	.value {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.change {
		font-size: 24rpx;
		margin-left: 16rpx;
	}

	.up {
		color: #2ecc71;
	}

	.down {
		color: #e74c3c;
	}

	.search-sort {
		display: flex;
		align-items: center;
		gap: 20rpx;
		margin: 30rpx 0;
	}

	.search-box {
		flex: 1;
	}

	.sort-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		background: #ffffff;
		padding: 16rpx 24rpx;
		border-radius: 100rpx;
	}

	.sort-text {
		font-size: 26rpx;
		color: #666;
	}

	.campus-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.campus-card {
		background: #ffffff;
		padding: 30rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.05);
	}

	.campus-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.rank {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.rank-text {
		font-size: 26rpx;
		color: #999;
	}

	.campus-title {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.campus-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #3498db;
	}

	.campus-details {
		display: flex;
		align-items: center;
		gap: 40rpx;
	}

	.progress-circle {
		flex-shrink: 0;
		width: 120rpx;
		height: 120rpx;
	}

	.detail-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.enrollment-info {
		display: flex;
		justify-content: space-between;
	}

	.info-text {
		font-size: 26rpx;
		color: #666;
	}

	.activity-info {
		display: flex;
		justify-content: flex-end;
		// align-items: center;
		gap: 8rpx;
	}
	
	
	.tag {
		font-size: 22rpx;
		color: #2F75FA;
		background-color: #d5e3fe;
		border-radius: 8rpx;
		padding: 5rpx 10rpx;
		margin-right: 20rpx;
	}
	
	.tags {
		font-size: 22rpx;
		color: #2F75FA;
		background-color: #d5e3fe;
		border-radius: 8rpx;
		padding: 5rpx 10rpx;
		margin-right: 20rpx;
	}

	.activity-text {
		font-size: 26rpx;
		color: #666;
	}

	.popup-content {
		background: #f3f3f3;
		width: 100%;
		min-height: 100vh;
		border-radius: 20rpx;
		// overflow: hidden;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.popup-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.popup-body {
		padding: 0 30rpx;
	}

	.activity-card {
		background: #ffffff;
		padding: 24rpx;
		border-radius: 12rpx;
		box-shadow: 0 2px 8rpx rgba(0, 0, 0, 0.05);
		margin-bottom: 20rpx;
		position: fixed;
		top: 0;
		z-index: 99;
		width: 92%;
	}

	.activity-content {
		display: flex;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.image {
		width: 200rpx;
		height: 100%;
		border-radius: 7rpx;
		// overflow: hidden;
		position: relative;

		/deep/ .u-transition {
			width: 100%;
			height: 100%;
		}

		.image-info {
			position: absolute;
			bottom: 0;
			width: 100%;
			left: 0;
			font-size: 24rpx;
			text-align: center;
			color: white;
			padding: 10rpx 0;
			background-color: rgba(0, 0, 0, 0.5);
		}
	}

	.activity-image {
		width: 200rpx;
		height: 160rpx;
		border-radius: 8rpx;
		flex-shrink: 0;
	}

	.activity-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.date-range {
		font-size: 24rpx;
		color: #666;
	}

	.activity-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.activity-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}

	.status-tag {
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 100rpx;
	}

	.active {
		background: #e8f6e9;
		color: #2ecc71;
	}

	.pending {
		background: #f5f5f5;
		color: #999;
	}

	.activity-progress {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.progress-text {
		font-size: 26rpx;
		color: #666;
	}

	.progress-bar-container {
		width: 100%;
		height: 16rpx;
		background: #f5f5f5;
		border-radius: 100rpx;
		overflow: hidden;
	}

	.progress-bar {
		height: 100%;
		border-radius: 100rpx;
		transition: width 0.3s ease;
	}
	.card-list {
		// padding: 20rpx;
	}
	
	.card {
		background-color: #ffffff;
		border-radius: 12rpx;
		// margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transform: scale(0.95);
	}
	
	.student-info {
		display: flex;
		align-items: center;
		padding: 16rpx 24rpx;
		position: relative;
	}
	
	.avatar-wrapper {
		position: relative;
	}
	
	.gender-icon {
		position: absolute;
		top: -4rpx;
		left: -4rpx;
		background: #fff;
		border-radius: 50%;
		width: 12px;
		height: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		z-index: 1;
		font-size: 8px;
		color: var(--gender-color);
	}
	
	.avatar {
		width: 56rpx;
		height: 56rpx;
		border-radius: 28rpx;
		position: relative;
	}
	
	.info-right {
		margin-left: 20rpx;
		flex: 1;
	}
	
	.name-status {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	
	.student-base {
		flex: 1;
	}
	
	.base-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8rpx;
	}
	
	.base-row:last-child {
		margin-bottom: 0;
	}
	
	.course-campus {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}
	
	.course-info-text {
		font-size: 13px;
		color: #666666;
	}
	
	.course-campus {
		margin-bottom: 8rpx;
	}
	
	.course-status {
		margin-bottom: 8rpx;
	}
	
	.merged-status-tag {
		font-size: 14px;
		color: #333333;
		background-color: #F5F5F5;
		padding: 4rpx 12rpx;
		border-radius: 4px;
		display: inline-block;
	}
	
	.status-tag {
		font-size: 12px;
		color: #007AFF;
		background-color: #E6F4FF;
		padding: 4rpx 12rpx;
		border-radius: 4px;
	}
	
	.birthday-tag {
		font-size: 11px;
		color: #666666;
		background-color: #f5f5f5;
		padding: 2rpx 6rpx;
		border-radius: 4px;
		margin-right: 8rpx;
	}
	
	.name {
		font-size: 14px;
		font-weight: 500;
		color: #333333;
	}
	
	.phone {
		font-size: 11px;
		color: #999999;
		margin: 0 8rpx;
	}
	
	.base-info {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-top: 4rpx;
	}
	
	.campus,
	.valid-until {
		font-size: 14px;
		color: #999999;
	
		&.expired {
			color: #ff4d4f;
		}
	}
	
	.course-type-tag {
		font-size: 12px;
		color: #007AFF;
		background-color: #e6f3ff;
		padding: 4rpx 12rpx;
		border-radius: 4px;
	}
	
	.badge-wrap {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}
	
	.package-count {
		font-size: 13px;
		color: #999999;
		padding: 4rpx 12rpx;
		background-color: #E6F4FF;
		border-radius: 4px;
	}
	
	.arrow-icon {
		color: #cccccc;
	}
	
	.course-info {
		padding: 12rpx 24rpx;
		border-bottom: 1px solid #f0f0f0;
		position: relative;
	}
	
	.timing-tag {
		display: inline-block;
		font-size: 12px;
		padding: 4rpx 16rpx;
		border-radius: 4px;
		background-color: #e6f3ff;
		color: #007AFF;
	}
	
	.course-info-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16rpx;
	}
	
	.course-type {
		grid-column: span 2;
		background-color: #f0f7ff;
		margin-bottom: 0;
	}
	
	.course-class {
		grid-column: span 2;
	}
	
	.course-info-header {
		display: flex;
		align-items: center;
		gap: 16rpx;
		width: 100%;
	}
	
	.course-name {
		color: #007AFF;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
		margin-right: 20rpx;
	}
	
	.campus-name {
		color: #007AFF;
		font-weight: 500;
		font-size: 12px;
		text-align: right;
		flex-shrink: 0;
	}
	
	.course-id {
		grid-column: span 2;
		background-color: #f0f7ff;
		margin-top: -16rpx;
	}
	
	.course-id-text {
		color: #666666;
		font-size: 12px;
		margin-right: 8rpx;
	}
	
	.course-id-wrap {
		display: flex;
		align-items: center;
		gap: 12rpx;
		flex: 1;
	}
	
	.copy-icon {
		padding: 8rpx;
	}
	
	.grid-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 6rpx;
		padding: 8rpx;
		background-color: #f8f9fa;
		border-radius: 8rpx;
		position: relative;
	}
	
	.info-combined {
		grid-column: span 2;
	}
	
	.grid-content {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	.lesson-info {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		font-size: 14px;
		color: #666666;
	}
	
	.lesson-remaining,
	.lesson-valid {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		font-size: 12px;
	}
	
	.status-info {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}
	
	.info-divider {
		margin: 0 20rpx;
		color: #cccccc;
		flex-shrink: 0;
	}
	
	.coach-info {
		display: flex;
		align-items: center;
		gap: 12rpx;
		width: 100%;
	}
	
	.coach-avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		flex-shrink: 0;
	}
	
	.class-name-wrap {
		min-width: 0;
	}
	
	.class-info {
		max-width: 100%;
	}
	
	.divider {
		margin: 0 8rpx;
		color: #cccccc;
	}
	
	.highlight {
		color: #666666;
		font-size: 12px;
		margin-right: 12rpx;
	}
	
	.grid-label {
		font-size: 12px;
		color: #999999;
	}
	
	.value {
		color: #333333;
		font-size: 14px;
		flex: 1;
	}
	
	.class-name-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.class-info {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.class-arrow {
		flex-shrink: 0;
	}
	
	.enroll-info {
		padding: 12rpx 24rpx;
		background-color: #fafafa;
		border-radius: 0 0 12rpx 12rpx;
	}
	
	
	
	.enroll-detail-scroll {
		width: 100%;
		white-space: nowrap;
	}
	
	.enroll-detail-wrap {
		display: flex;
		align-items: center;
	}
	
	.enroll-detail {
		color: #999999;
		font-size: 12px;
		line-height: 1.4;
		display: inline-block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex: 1;
	}
	
	.view-more {
		flex-shrink: 0;
		margin-left: 8rpx;
	}
	
	.highlight {
		color: #007AFF;
		font-weight: 500;
	}
	
	.highlight-expired {
		color: #999999;
		font-size: 12px;
		font-weight: normal;
	}
	
	.status-tag {
		font-size: 12px;
		padding: 4rpx 12rpx;
		border-radius: 4px;
	}
	.storepopup {
		.enroll-detail-popup {
			// width: 600rpx;
			// background: #ffffff;
			// border-radius: 16rpx;
			overflow: hidden;
		}
	
		.enroll-detail-title {
			font-size: 16px;
			color: #333333;
			font-weight: 500;
			text-align: center;
			padding: 30rpx 30rpx 10rpx 30rpx;
			border-bottom: 1px solid #f0f0f0;
		}
	
		.enroll-detail-content {
			padding: 20rpx 10rpx 10rpx 20rpx;
			max-height: 820rpx;
			overflow-y: auto;
		}
	
		.detail-item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 24rpx;
			line-height: 1.5;
		}
	
		.detail-item:last-child {
			margin-bottom: 0;
		}
	
		.detail-label {
			width: 170rpx;
			flex-shrink: 0;
			color: #999999;
			font-size: 14px;
		}
	
		.detail-value {
			flex: 1;
			color: #333333;
			font-size: 14px;
		}
	
		.remark-item {
			align-items: flex-start;
		}
	
		.remark-item .detail-value {
			word-break: break-all;
		}
	}
	.enroll-detail-footer {
		padding: 20rpx 30rpx;
		border-top: 1px solid #f0f0f0;
	}
	
	.close-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #007AFF;
		color: #ffffff;
		font-size: 16px;
		border-radius: 8rpx;
		border: none;
	}
</style>